<template>
	<view class="body">
		<!-- scan @scanHandle="scanHandle" -->
		<xk-header :headerbg="true" :back="false" title="昂宝智慧园区"></xk-header>
		<view class="top-view">
			<!-- 广告图 -->
			<!-- <view v-if="bannerList.length > 0" class="banner">
				<swiper @change="bannerChange" :current="bannerIndex" class="swiper" :indicator-dots="true"
					indicator-color="#cbc9cd" indicator-active-color="#FFFFFF" :autoplay="autoPlay" :circular="true">
					<swiper-item v-for="(item, index) of bannerList" :key="index">
						<image mode="aspectFill" class="banner-item" :src="item.poster_image | formatImgPath"
							@click="goBannerDetail(item)" />
					</swiper-item>
				</swiper>
			</view> -->
			<view class="banner">
				<u-swiper height="200px" :list="listSwiper" indicator indicatorMode="dot" circular></u-swiper>
			</view>
			<!-- 公告 -->
			<view v-if="placardList.length > 0" class="message-view">
				<image v-if="!isLogin" class="message-icon" mode="heightFix" :src="(imgUrl+'/wx/notice-gg.png')" />
				<image v-if="isLogin" class="message-icon2" mode="heightFix" :src="(imgUrl+'/wx/notice-zygg.png')" />
				<swiper class="message-swiper" :disable-touch="true" :circular="true" :vertical="true"
					:indicator-dots="false" :autoplay="autoPlay" :interval="5000">
					<swiper-item class="swiper-item" v-for="(item, index) in placardList" :key="index">
						<view class="message one-line" @click="goNoticeDetail(item)">{{ item.name }}</view>
					</swiper-item>
				</swiper>
				<image class="right-icon" :src="(imgUrl+'/static/right.png')"></image>
			</view>
		</view>
		
		<view class="user-menu">
			<scroll-view class="scroll-view" scroll-y="true" :style="{height : `${munuHeight}px`}">
				<view v-for="(title, index) in titles" :key="index" class="user-menu-item">
					<view class="title">{{ title }}</view> <!-- 使用键名作为标题显示 -->
					<view class="item-box">
						<view class="item" v-for="(item, i) in responseData[title]" :key="i" @click="menuClick(item)">
							<image :src="item.fun_icon" mode="aspectFit" style="width:100rpx;height: 100rpx;"></image>
							<!-- <image src="https://ibms.on-bright.com:8000/wx/meetingRoom.png" mode="aspectFit" style="width:100rpx;height: 100rpx;"></image> -->
							<!-- 显示图标 -->
							<view class="item-title">{{ item.name }}</view> <!-- 显示名称 -->
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		

	
		<shopping-cart v-if="isTenant=='TENANT' || isTenant=='NOT_YET_TENANT'|| isTenant=='Notloggedin'"
			ref="shoppingCart" class="shopping-cart" :style="{ top: cartTop + 'px' }" />

		<login-popup ref="loginPopup"></login-popup>
		<!-- <tabbar></tabbar> -->
	</view>
</template>
<script>
	// import facilityrepairlist from './facilityrepairlist.vue'
	export default {
		// components: {facilityrepairlist， tabbar },
		data() {
			return {
				indicatorDots: true,
				imgUrl: this.$config.BASE_imgUrl,
				cartTop: 0,
				listSwiper: [
					
				],
				isTenant: this.$util.isTenant(), //TENANT租户NOT_YET_TENANT不是租户Notloggedin未登录Admin管理员
				isLogin: this.$util.isLogin(), //
				
				userType: this.$util.getStorage("loginInfo").userType, //
				loginInfo: this.$util.getStorage("loginInfo"),
				token:  this.$util.getStorage("loginInfo").app == undefined ?this.$util.getStorage("loginInfo")?.wx?.wxToken  :  this.$util.getStorage("loginInfo")?.app?.token,
				userId: this.$util.getStorage("loginInfo").app == undefined ? this.$util.getStorage("loginInfo")?.wx?.id  : this.$util.getStorage("loginInfo")?.app?.id,
				scrollViewHeight: 0,
				bannerIndex: 0,
				autoPlay: false,
				bannerList: [], // 海报数据列表
				placardList: [], // 公告列表
				menuListNoLogin: [{ // 访客菜单
						title: "预约记录",
						icon: this.$config.BASE_imgUrl + "/wx/menu-kf.png",
						url: "/pages/estate/make-appt-record",
						num: 0,
						isNeedLogin: true
					}, {
						title: "园区介绍",
						icon: this.$config.BASE_imgUrl + "/wx/sever.png",
						url: "/pages/mine/service-introduction",
						num: 0
					}, {
						title: "招商联系",
						icon: this.$config.BASE_imgUrl + "/wx/zhaosahng.png",
						url: "/pages/mine/bussiness-contact",
						num: 0
					}, {
						title: "公告消息",
						icon: this.$config.BASE_imgUrl + "/wx/menu-ggsx.png",
						url: "/pagesC/notice/notice-index",
						num: 0
					}, {
						title: "通行预约",
						icon: this.$config.BASE_imgUrl + "/wx/menu-ssxj.png",
						url: "/pagesA/passthrough/index",
						num: 0,
						isNeedLogin: true
					},
					{
						title: "账单",
						icon: this.$config.BASE_imgUrl + "/wx/drive-room.png",
						url: "/pagesB/print-bill/bill-list",
						num: 0,
					}, {
						title: "反向寻车",
						icon: this.$config.BASE_imgUrl + "/wx/search-car.png",
						url: "/pagesC/parking/searching",
						num: 0,
						isNeedLogin: true,
					}
				],
				menuListAdmin: [{ // 管理员菜单
					title: "预约管理",
					icon: this.$config.BASE_imgUrl + "/wx/menu-yygl.png",
					url: "/pagesA/check-house/check-house-list",
					num: 0,
					isNeedLogin: true
				}, {
					title: "园区介绍",
					icon: this.$config.BASE_imgUrl + "/wx/sever.png",
					url: "/pages/mine/service-introduction",
					num: 0
				}, {
					title: "招商联系",
					icon: this.$config.BASE_imgUrl + "/wx/zhaosahng.png",
					url: "/pages/mine/bussiness-contact",
					num: 0
				}, {
					title: "公告消息",
					icon: this.$config.BASE_imgUrl + "/wx/menu-ggsx.png",
					url: "/pagesC/notice/notice-index",
					num: 0
				}, {
					title: "物业巡检",
					icon: this.$config.BASE_imgUrl + "/wx/menu-wyxc.png",
					url: "/pagesA/build-patrol/build-patrol-list",
					num: 0,
				}, {
					title: "报事报修",
					icon: this.$config.BASE_imgUrl + "/wx/menu-bsbx.png",
					url: "/pagesA/facility-repair/facility-repair-list",	
					num: 0,
				}, {
					title: "设施巡检",
					icon: this.$config.BASE_imgUrl + "/wx/menu-ssxj.png",
					url: "/pagesA/facility-patrol/facility-patrol-list",
					num: 0,
				}, {
					title: "开票受理",
					icon: this.$config.BASE_imgUrl + "/wx/open-ticket.png",
					url: "/pagesB/open-ticket/ticket-apply-list",
					num: 0,
				}, ],
				menuListAdmin2: [{ // 管理员菜单
						title: "意见箱 ",
						icon: this.$config.BASE_imgUrl + "/wx/menu-yjx.png",
						url: "/pagesA/ideas-box/ideas-box-list",
						num: 0,
					},
					//  {
					// 	title: "专项检查",
					// 	icon: this.$config.BASE_imgUrl + "/wx/menu-zxjc.png",
					// 	url: "/pagesA/special-check/special-check-list",
					// 	num: 0,
					// }, 
					{
						title: "设备维修",
						icon: this.$config.BASE_imgUrl + "/wx/menu-sbwx.png",
						url: "/pagesA/facility-fix/facility-fix-list",
						num: 0,
					},
					// {
					// 	title: "日常工作",
					// 	icon: this.$config.BASE_imgUrl + "/wx/menu-rcdj.png",
					// 	url: "/pagesA/daily-work/daily-work-list",
					// 	num: 0,
					// },
					{
						title: "设备保养",
						icon: this.$config.BASE_imgUrl + "/wx/menu-sbby.png",
						url: "/pagesA/facility-upkeep/facility-upkeep-list",
						num: 0,
					}, {
						title: "我的客户",
						icon: this.$config.BASE_imgUrl + "/wx/menu-wdkh.png",
						url: "/pagesB/my-customer/my-customer-list",
						num: 0,
					}, {
						title: "设备控制",
						icon: this.$config.BASE_imgUrl + "/wx/menu-sbkz.png",
						url: "/pagesB/device-control/index",
						num: 0,
					}, {
						title: "驾驶舱",
						icon: this.$config.BASE_imgUrl + "/wx/drive-room.png",
						url: "/pagesB/statistics/index",
						num: 0,
					}, {
						title: "反向寻车",
						icon: this.$config.BASE_imgUrl + "/wx/search-car.png",
						url: "/pagesC/parking/searching",
						num: 0,
						isNeedLogin: true,
					}
				],
				menuList: [{ // 租户菜单
						title: "物业缴费",
						icon: this.$config.BASE_imgUrl + "/wx/jiaofeidan.png",
						url: "/pagesC/pay-order/pay-order",
						num: 0
					}, {
						title: "报事报修",
						icon: this.$config.BASE_imgUrl + "/wx/baoxiu.png",
						url: "/pagesC/report-repair/report-repair-index",
						num: 0
					}, {
						title: "意见箱",
						icon: this.$config.BASE_imgUrl + "/wx/xianchangfankui.png",
						url: "/pagesA/feedback/feedback-index",
						num: 0
					}, {
						title: "选房预约",
						icon: this.$config.BASE_imgUrl + "/wx/menu-kf.png",
						url: "/pages/estate/make-appt-record",
						num: 0
					}, {
						title: "公告消息",
						icon: this.$config.BASE_imgUrl + "/wx/xiaoxi.png",
						url: "/pagesC/notice/notice-index",
						num: 0
					}, {
						title: "反向寻车",
						icon: this.$config.BASE_imgUrl + "/wx/search-car.png",
						url: "/pagesC/parking/searching",
						num: 0,
						isNeedLogin: true,
					}
					// {
					// 	title: "人员管理",
					// 	icon: this.$config.BASE_imgUrl + "/wx/menu-rygl.png",
					// 	url: "/pagesC/employee/employee-index",
					// 	num: 0
					// }, 

				],
				tabIndex: 0,
				tabs: [],
				dataList: [],
				isLoading: false,
				unDoneLookingRoomList: [], // 未完成看房列表
				completeLookingRoomList: [], // 完成看房列表
				facility: '',
				newMenuList: [],
				responseData: {}, // 存储接口返回的数据
				titles: [], // 存储键名，用于作为标题显示
				munuHeight:'',
			};
		},
		mounted() {
			this.getMenuList()
			this.initInfo()
			// console.log('getStorage',this.$util.getStorage("loginInfo").app == undefined ?this.$util.getStorage("loginInfo")?.wx?.wxToken  :  this.$util.getStorage("loginInfo")?.app?.token, )
			this.$util.changeMenuTwo()
			//#ifdef MP-WEIXIN
			uni.showShareMenu({
				menus: ["shareAppMessage", "shareTimeline"]
			});
			//#endif

			// this.$util.getPictureSwith('wx/slideshow/querySlideshow')
			this.$util.post({
				url: 'wx/slideshow/querySlideshow',
			}).then(res => {
				console.log('---------------------------', res);
				this.listSwiper = res ? res : this.listSwiper
			})


			// this.facility = this.selectComponent('#facilityId');

			//录播图
			// this.$util.post({
			// 	url: "",
			// }).then((res)=>{
			// 	this.listSwiper = res.data
			// });
		},
		onShow() {
			// this.facility.queryListInfo(true)
			this.autoPlay = true;
			// this.updateHeight()
			this.queryList()
			// 获取菜单角标数量
			// this.getMenuNum()
			if (this.$refs.shoppingCart) {
				this.$refs.shoppingCart.refresh()
			}
		},
		onReady() {
			this.updateHeight()
		},
		onHide() {
			this.autoPlay = false;
		},
		onPullDownRefresh() {
			this.queryList()
			this.initInfo()
			// this.getMenuNum()
			this.stopRefresh()
		},
		methods: {
			getMenuList() {
				let apiConnect = ''
				if (this.loginInfo.app) {
					apiConnect = 'app'
				} else {
					apiConnect = 'wx'
				}
				// console.log('hbh',this.token);
				this.$util.post({
					url: `${apiConnect}/login/appRole`,
					data: {
						token: this.token ? this.token : '',
						userID: this.userId ? this.userId : ''
					}
				}).then(res => {
					console.log(res,33333333333333333333);
					//更改未登录状态
					let list = res.fun.filter(item => {
						return item.pack_name === this.$store.state.tabbarName
					})
					console.log('确定————————', res.fun, list);
					//这里的索引改为点击获取到的索引
					const data = list[0].funs
					// 以 parent_name 作为条件，转换为指定格式的数据
					const resultObject = data.reduce((acc, obj) => {
						if (!acc[obj.parent_name]) {
							acc[obj.parent_name] = [];
						}
						acc[obj.parent_name].push({
							name: obj.fun_name,
							page_url: obj.page_url,
							fun_icon: obj.fun_icon,
							fun_name: obj.fun_name,
							interface_pre_url: obj.interface_pre_url
						});
						return acc;
					}, {});
					this.responseData = resultObject;
					this.titles = Object.keys(this.responseData); // 将键名存储在 titles 数组中
					// console.log('将键名存储在',this.titles);
				})
			},
			scanHandle(res) {
				let result = res.result
				// if(result.startsWith('https://cpcnmgapiapp.twcabc.com') || true){
				let param = result.split('?')[1] || ''
				let params = param.split('&')
				let type = '';
				let value = '';
				for (let item of params) {
					let kv = item.split('=')
					if (kv[0] === 'type') {
						type = kv[1]
					} else if (kv[0] === 'value') {
						value = kv[1]
					}
				}
				if (type) {
					uni.navigateTo({
						url: '/pagesC/scan-result/scan-result?type=' + type + '&value=' + value
					})
				} else {
					// 	this.$util.toast('无法识别二维码内容')
				}
				// console.log('scanHandle', res)
			},
			updateHeight() {
				// if (this.isTenant == 'TENANT' || this.isTenant == 'NOT_YET_TENANT' || this.isTenant == 'Notloggedin') {
				// 	setTimeout(() => {
				// 		this.$util.getHeightWithTopEl(".tabs-bar").then(height => {
				// 			this.scrollViewHeight = height - 20;
				// 		});
				// 	}, 1000)
				// }

				uni.getSystemInfo({
					success: (res) => {
						this.cartTop = res.screenHeight - 150;
						this.munuHeight = res.screenHeight - 180;
						// console.warn("munuHeight: ", this.munuHeight)
					}
				});
			},
			stopRefresh() {
				setTimeout(() => {
					uni.stopPullDownRefresh()
				}, 1000)
			},
			getMenuNum() {
				if (!this.$util.isLogin()) return;
				if (this.isTenant == 'TENANT' || this.isTenant == 'NOT_YET_TENANT') {
					let query = this.$util.formatGraphqlQuery([{
						fun: 'num: piLookingRoom_getPiLookingRoomNum',
					}])
					this.$util.postGraphql({
						query
					}).then((res) => {
						this.menuList[1][0].num = res.num
					})

					query = this.$util.formatGraphqlQuery([{
						fun: 'num: pmServiceRepair_getPmServiceRepairNum',
					}])
					this.$util.postGraphql({
						query
					}).then((res) => {
						this.menuList[0][1].num = res.num
					})
					this.$api.pmServiceRepair_getPmServiceRepairList({
						start: 0,
						limit: 49
					}).then(res => {
						console.warn("报事报修列表：", res)

						this.menuList[0][1].num = res.unDoneServiceRepairList.length

					})
					query = this.$util.formatGraphqlQuery([{
						fun: 'num: pmFeedback_getPmFeedbackNum',
					}])
					this.$util.postGraphql({
						query
					}).then((res) => {
						this.menuList[0][2].num = res.num
					})
					this.$api.pmFeedback_getPmFeedbackList({
						start: 0,
						limit: 49
					}).then(res => {
						console.warn("反馈列表查询结果：", res)

						this.menuList[0][2].num = res.unDoneFeedbackList.length
					})

					query = this.$util.formatGraphqlQuery([{
						fun: 'num: piPayNotice_getPiPayNoticeNum',
					}])
					this.$util.postGraphql({
						query
					}).then((res) => {
						this.menuList[0][0].num = res.num
					})
					this.$api.piPayNotice_getPiPayNoticeList().then(res => {
						console.warn("缴费列表：", res)

						this.menuList[0][0].num = res.unDoneList.length
					})
				} else {
					let query = this.$util.formatGraphqlQuery([{
						fun: 'num: piLookingRoom_getPiLookingRoomNum',
					}])
					this.$util.postGraphql({
						query
					}).then((res) => {
						this.menuList[0][0].num = res.num
					})
				}
			},
			initInfo() {
				let query = this.$util.formatGraphqlQuery([{
					fun: "bannerList:index_getMbPoster", // 海报列表
					params: {},
					result: "name, poster_image, content"
				}, {
					fun: "placardList:index_getMbPlacard", // 消息公告列表
					params: {},
					result: "name, content,  publish_dept, publisher, enable_time"
				}, {
					fun: "tabs:assets_getAssetsPropertyType", // 物业分类
					params: {},
					result: "property_type_id, property_type_name"
				}])
				this.$util.postGraphql({
					query
				}, {}, 'wx').then((res) => {
					console.warn("海报请求列表2：", res.bannerList)
					// console.warn("消息公告请求列表：", res.placardList)
					// console.warn("物业分类请求列表tabs-----》：", res.tabs)

					this.bannerList = [] //.splice(0, this.bannerList.length)
					for (let item of res.bannerList) {
						console.warn("item: ", item)
						let items = item.poster_image.split(";");
						for (let imgItem of items) {
							if (!imgItem) continue;
							item.poster_image = imgItem
							break;
						}

						this.bannerList.push(item);
					}
					console.log('this.bannerList', this.bannerList)
					// this.bannerList = res.bannerList
					this.placardList = res.placardList


					if (this.isTenant == 'TENANT') {
						this.tabs.push({
							start: 0,
							isLoad: false, // 数据加载标识
							isReload: true, // 重新载入标识
							triggered: false
						})
						this.dataList.push([])
					} else {
						this.tabs = res.tabs
						console.warn("物业分类请求列表tabs-----》：", this.tabs)
						for (let index in this.tabs) {
							this.dataList.push([])

							this.tabs[index].start = 0
							this.tabs[index].isLoad = false // 数据加载标识
							this.tabs[index].isReload = true // 重新载入标识
							this.tabs[index].triggered = false
						}
					}

					this.queryListInfo()
				})
			},
			queryList() {
				this.$api.piLookingRoom_getPiLookingRoomList().then(res => {
					console.warn("查询预约看房列表: ", res)
					let unDoneLookingRoomList = []
					let completeLookingRoomList = [];
					if (res.unDoneLookingRoomList) {
						for (let item of res.unDoneLookingRoomList) {
							if (item.pi_looking_property_dets) {
								for (let propertyItem of item.pi_looking_property_dets) {
									unDoneLookingRoomList.push(propertyItem.property_id);
								}
							}
						}
					}
					if (res.completeLookingRoomList) {
						for (let item of res.completeLookingRoomList) {
							if (item.pi_looking_property_dets) {
								for (let propertyItem of item.pi_looking_property_dets) {
									if (item.jd_status == "COMPLETE")
										completeLookingRoomList.push(propertyItem.property_id);
								}
							}
						}
					}
					this.unDoneLookingRoomList = unDoneLookingRoomList
					this.completeLookingRoomList = completeLookingRoomList
					console.warn("未完成看房列表: ", this.unDoneLookingRoomList)
					console.warn("已完成看房列表: ", this.completeLookingRoomList)
				})
			},

			bannerChange(e) {
				this.bannerIndex = parseInt(e.target.current);
			},
			tabChange(index) {
				this.tabIndex = index
				this.tabs[this.tabIndex].isReload = true;
				this.queryListInfo()
			},
			goBannerDetail(item) {
				// 暂时屏蔽
				// if (!item.url) {
				// 	this.$util.noOpen()
				// 	return
				// }
				// uni.navigateTo({
				// 	url: "/pagesC/house-type/house-type"
				// })
			},
			goNoticeDetail(item) {
				uni.navigateTo({
					url: "/pagesC/notice/notice-detail?data=" + JSON.stringify(item)
				})
			},
			checkIsLogin() {
				if (!this.$util.isLogin()) {
					this.$util.confirm({
						content: "请先登录",
						confirmText: "立即登录"
					}).then((isConfirm) => {
						if (isConfirm) {
							this.$refs.loginPopup.show()
						}
					})
					return false
				}
				return true
			},
			menuClick(item) {
				console.log('222', item)
				//点击时获取当前点击icon是app后缀还是vx后缀
				this.$util.setStorage('isPermissions', item.interface_pre_url)
				// if (!item.page_url) {
				// 	this.$util.noOpen()
				// 	return;
				// }

				// if (item.page_url == "empty") return;

				if (this.token == undefined && this.userId == undefined) {
					console.log(1111111)
					if (!this.checkIsLogin()) return;
				}

				if (item.page_url === "scan") {
					uni.scanCode({
						onlyFromCamera: true,
						success: function(res) {
							console.log('条码类型：' + res.scanType);
							console.log('条码内容：' + res.result);
						}
					});
				}

				console.log(333333, item.page_url)
				uni.navigateTo({
					url: item.page_url
				})
			},
			makeAppt(item) {
				if (!this.$util.isLogin()) {
					uni.navigateTo({
						url: "/pages/estate/estate-info?data=" + JSON.stringify(item)
					})
					return
				};
				uni.navigateTo({
					url: "/pages/estate/make-appt-house?data=" + JSON.stringify(item)
				})
			},
			goDetail(item) {
				if (!this.$util.isLogin()) return;
				uni.navigateTo({
					url: "/pages/estate/estate-info?data=" + JSON.stringify(item)
				})
			},
			queryListInfo() {
				// 判断是否重新加载，isReload为true时，清空对应的列表数据
				for (let index in this.tabs) {
					let tab = this.tabs[index]
					if (tab.isReload) { // 重新加载数据
						this.dataList[index].splice(0, this.dataList[index].length);
						this.tabs[index].isReload = false
						this.tabs[index].start = 0
						this.tabs[index].isLoad = true
					}
				}
				// 物业信息查询
				let params = {
					start: this.tabs[this.tabIndex].start
				}
				if (this.tabs[this.tabIndex].property_type_id) {
					params.property_type_id = this.tabs[this.tabIndex].property_type_id
				}
				// 物业信息查询
				this.$api.assets_getAssetsProperty(params).then(res => {
					console.warn("物业信息查询列表：", params)
					for (let item of res) {
						// item.property_images = []
						// let items = item.property_image.split(";");
						// for (let imgItem of items) {
						// 	if (!imgItem) continue;
						// 	item.property_images.push(imgItem)
						// 	item.property_image = item.property_images[0];
						// }

						this.dataList[this.tabIndex].push(item);
					}
					// 更新下一次请求的数据起始下标
					this.tabs[this.tabIndex].start += res.length

					// 设置所有加载标识
					for (let index in this.tabs) {
						this.tabs[index].isLoad = false

						setTimeout(() => {
							this.tabs[index].triggered = false
						}, 1000)
					}

					this.updateHeight();
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.top-view {
		background-color: #ffffff;

		.banner {
			position: relative;

			.swiper {
				height: 320rpx;
			}

			.banner-item {
				width: 750rpx;
				height: 320rpx;
			}
		}

		.notice-img {
			width: 50rpx;
			height: 50rpx;
			border-radius: 10rpx;
		}
	}

	.list {
		position: relative;
		width: 100%;
		padding-bottom: 30rpx;
		background-color: #FFFFFF;
		border-radius: 20rpx;

		.page {
			width: 100%;
		}

		.img {
			position: relative;
			margin: 0 auto;
			width: 90%;
			top: 20rpx;
			// display: flex;
			// flex-wrap: wrap;
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			margin: auto;

			.block {
				position: relative;
				min-width: 130rpx;
				height: 130rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				padding-top: 10px;
				// padding: 10px 10px 5px 10px;

				.text {
					font-size: 24rpx;
					text-align: center;
					// margin-left: 10px;
				}

				.img-style {
					width: 100%;
					display: flex;
					justify-content: center;
				}
			}
		}
	}

	.message-view {
		height: 96rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 20rpx;
		padding: 0rpx 30rpx;

		.message-icon {
			height: 28rpx;
		}

		.message-icon2 {
			height: 28rpx;
		}

		.message-swiper {
			flex: 1;
			height: 50rpx;

			.swiper-item {
				display: flex;
				align-items: center;

				.message {
					line-height: 50rpx;
					width: 450rpx;
					margin: 0 20rpx;
					font-size: 28rpx;
					color: #333333;
				}

				.time {
					flex: 1;
					line-height: 50rpx;
					text-align: right;
					font-size: 24rpx;
					color: #999999;
				}
			}
		}

		.right-icon {
			width: 24rpx;
			height: 24rpx;
		}
	}

	.menu {
		background-color: #FFFFFF;
		margin: 20rpx 30rpx 0rpx 30rpx;
		// display: flex;
		// align-items: center;
		// justify-content: space-around;
		padding: 17px 0;

		.menu-line {
			display: flex;
			align-items: center;
			justify-content: space-around;
		}

		.menu-item {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			flex: .33;
			position: relative;

			.menu-item-img {
				width: 80rpx;
				height: 80rpx;
				margin-bottom: 10rpx;
			}

			.menu-num {
				width: 30rpx;
				height: 30rpx;
				background-color: #FF3737;
				color: #FFFFFF;
				font-size: 22rpx;
				border-radius: 30rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				position: absolute;
				top: 0;
				right: 40rpx;
			}

			.text {
				font-size: 28rpx;
				color: #333333;
			}
		}

	}

	.tabs-bar {
		display: flex;
		align-items: center;
		// justify-content: space-between;
		padding: 0 30rpx;

		.more {
			display: flex;
			align-items: center;
			font-size: 24rpx;
			color: #999999;

			.right-icon {
				width: 24rpx;
				height: 24rpx;
			}
		}

		.scroll-view {
			display: flex;
			flex-direction: row;
			width: 650rpx;
		}

		.tabs {
			margin-top: 30rpx;
			display: flex;
			align-items: center;
			flex-direction: row;
			justify-content: center;
			flex: 1;
			white-space: nowrap;

			.item {
				display: inline-block;
				height: 65rpx;
				align-items: center;
				justify-content: center;
				font-size: 32rpx;
				margin-right: 60rpx;
				color: #333333;
				border-bottom: 6rpx solid rgba(#2C72FF, 0);
			}

			.item-a {
				font-weight: bolder;
				border-bottom: 6rpx solid #2C72FF;
			}

		}
	}

	.tabs-bar-tenant {
		background-color: #FFFFFF;
		margin: 30rpx 30rpx 0rpx 30rpx;
		padding-left: 0;

		.content-title {
			font-size: 32rpx;
			color: #333333;
			font-weight: bold;
			display: flex;
			align-items: center;
			padding: 32rpx 0rpx;
			flex: 1;

			.title-icon {
				width: 12rpx;
				height: 40rpx;
				background-color: #2C72FF;
				border-top-right-radius: 8rpx;
				border-bottom-right-radius: 8rpx;
				margin-right: 10rpx;
			}
		}
	}

	.list-info {
		margin: 0 30rpx;

		.list-swiper {
			height: 1000rpx;
		}

		.data-list {
			background-color: #FFFFFF;
			border-radius: 10rpx;
			padding: 30rpx 20rpx 170rpx 20rpx;

			.data-item {
				display: flex;
				margin-bottom: 30rpx;

				.img {
					width: 200rpx;
					height: 165rpx;
					border-radius: 10rpx;
					margin-right: 20rpx;
				}

				.info {
					flex: 1;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.name {
						font-size: 28rpx;
						font-weight: 600;
						color: #333333;
					}

					.desc {
						font-size: 24rpx;
						color: #999999;
						margin-top: 10rpx;
						font-weight: 400;
					}

					.amount {
						font-size: 36rpx;
						color: #FF3737;
						font-weight: 700;

						text {
							font-size: 24rpx;
							color: #FF3737;
							font-weight: 600;
						}
					}
				}

				.btn-part {
					display: flex;
					align-items: flex-end;

					.common-btn {
						height: 60rpx;
						width: 120rpx;
						font-size: 28rpx;
						margin: 0;
					}
				}
			}
		}
	}

	.title {
		font-size: 30rpx;
		margin-top: 20rpx;
		margin-left: 10rpx;
	}

	.item-box {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		grid-row-gap: 10rpx;
		margin-top: 20rpx;
		padding-left: 20rpx;
		padding-right: 20rpx;

		.item {
			display: flex;
			flex-direction: column;
			align-items: center;

			.item-title {
				font-size: 20rpx;
			}
		}
	}

	.user-menu {
		margin-top: 20rpx;
		margin-left: 20rpx;
		margin-right: 20rpx;
		margin-bottom: 120rpx;
		display: flex;
		flex-direction: column;
		gap: 20rpx;
		.user-menu-item {
			background-color: #FFFFFF;
			border-radius: 5rpx;
			padding: 12rpx;
			// margin-top: 20rpx;
			// margin-bottom: 20px;
		}

		.scroll-view {
			// height: 50vh;
			// height: 50vh;
			// height: 70vh;
			// height: 57vh;
		}
	}
</style>